<template>
  <div>
    <el-page-header @back="$router.go(-1)" content="工程详情"></el-page-header>

    工程详情页面 --{{ engDetails.serial_number }} {{ engDetails.name }} {{ engDetails.type }}

    <el-card class="engineering-info-card" shadow="hover" style="margin-top: 20px;">
      <el-form label-width="120px">
        <el-form-item label="工程编号">{{ engDetails.serial_number }}</el-form-item>
        <el-form-item label="工程名称">{{ engDetails.name }}</el-form-item>
        <el-form-item label="工程类型">{{ engDetails.type }}</el-form-item>
        <el-form-item label="工程状态">
          <el-tag :type="engDetails.status === '监测中' ? 'success' : engDetails.status === '未绑定' ? 'warning' : 'danger'" effect="dark">
            {{ engDetails.status }}
          </el-tag>
        </el-form-item>
        <el-form-item label="开始时间">{{ engDetails.create_time }}</el-form-item>
        <el-form-item label="结束时间">{{ engDetails.end_time || '未结束' }}</el-form-item>
        <el-form-item label="地址">{{ engDetails.address }}</el-form-item>
        <el-form-item label="工程负责人">{{ engDetails.charge_id }}</el-form-item>
      </el-form>
    </el-card>

    <el-card class="binding-info-card" shadow="hover" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <h3>绑定信息</h3>
        <el-button type="primary" style="float: right;" @click="showBindDialog">绑定</el-button>
      </div>
      <el-table :data="boundDevices" border style="width: 100%;">
        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="deviceNumber" label="设备编号" width="180" align="center"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称" width="180" align="center"></el-table-column>
        <el-table-column prop="longitude" label="经度" align="center"></el-table-column>
        <el-table-column prop="latitude" label="纬度" align="center"></el-table-column>
        <el-table-column prop="videoAddress" label="视频地址" align="center"></el-table-column>
        <el-table-column prop="onlineStatus" label="在线状态" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.onlineStatus === '在线'" type="success">在线</el-tag>
            <el-tag v-else type="danger">离线</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button type="text" @click="unbindDevice(scope.row)" :disabled="engDetails.status !== '监测中'">解绑</el-button>
            <el-button type="text" @click="offlineDevice(scope.row)" :disabled="scope.row.onlineStatus !== '在线'">下线</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 绑定设备对话框 -->
    <el-dialog title="绑定设备" :visible.sync="bindDialogVisible" width="50%">
      <el-form :model="deviceForm" label-width="120px">
        <el-form-item label="设备编号">
          <el-select v-model="deviceForm.deviceId" placeholder="请选择设备" @change="handleDeviceSelect">
            <el-option
              v-for="device in availableDevices"
              :key="device.id"
              :label="device.deviceNumber"
              :value="device.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称">
          <el-input v-model="deviceForm.deviceName" disabled></el-input>
        </el-form-item>
        <el-form-item label="经度">
          <el-input v-model="deviceForm.longitude" disabled></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="deviceForm.latitude" disabled></el-input>
        </el-form-item>
        <el-form-item label="视频地址">
          <el-input v-model="deviceForm.videoAddress" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bindDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmBind">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      engDetails: {},
      boundDevices: [
        {
          id: 1,
          deviceNumber: "DV_20210003",
          deviceName: "三号设备",
          longitude: "103.698965",
          latitude: "36.090771",
          videoAddress: "http://8.130.16.184/vv.mov",
          onlineStatus: "在线",
        },
      ],
      availableDevices: [
        {
          id: 2,
          deviceNumber: "DV_20210004",
          deviceName: "四号设备",
          longitude: "104.123456",
          latitude: "36.567890",
          videoAddress: "http://example.com/video4.mov",
          },
        {
          id: 3,
          deviceNumber: "DV_20210005",
          deviceName: "五号设备",
          longitude: "105.987654",
          latitude: "37.123456",
          videoAddress: "http://example.com/video5.mov",
        },
      ],
      bindDialogVisible: false,
      deviceForm: {},
    };
  },
  created() {
    this.engDetails = this.$route.query;
  },
  methods: {
    showBindDialog() {
      this.deviceForm = {};
      this.bindDialogVisible = true;
    },
    handleDeviceSelect(deviceId) {
      const selectedDevice = this.availableDevices.find(
        (device) => device.id === deviceId
      );
      if (selectedDevice) {
        this.deviceForm = {
          deviceId: selectedDevice.id,
          deviceName: selectedDevice.deviceName,
          longitude: selectedDevice.longitude,
          latitude: selectedDevice.latitude,
          videoAddress: selectedDevice.videoAddress,
        };
      }
    },
    confirmBind() {
      if (!this.deviceForm.deviceId) {
        this.$message.warning("请选择要绑定的设备");
        return;
      }
      this.boundDevices.push({
        ...this.deviceForm,
        id: this.deviceForm.deviceId,
        onlineStatus: "在线",
      });
      this.availableDevices = this.availableDevices.filter(
        (device) => device.id !== this.deviceForm.deviceId
      );
      this.bindDialogVisible = false;
      this.$message.success("绑定成功");
    },
    unbindDevice(device) {
      this.$confirm("此操作将解绑该设备，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.boundDevices = this.boundDevices.filter(
          (item) => item.id !== device.id
        );
        this.availableDevices.push({
          id: device.id,
          deviceNumber: device.deviceNumber,
          deviceName: device.deviceName,
          longitude: device.longitude,
          latitude: device.latitude,
          videoAddress: device.videoAddress,
        });
        this.$message.success("解绑成功");
      }).catch(() => {
        this.$message.info("已取消操作");
      });
    },
    offlineDevice(device) {
      this.$confirm("此操作将使设备下线，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const deviceIndex = this.boundDevices.findIndex(
          (item) => item.id === device.id
        );
        if (deviceIndex !== -1) {
          this.boundDevices[deviceIndex].onlineStatus = "离线";
        }
        this.$message.success("设备下线成功");
      }).catch(() => {
        this.$message.info("已取消操作");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.engineering-info-card,
.binding-info-card {
  width: 100%;
}
</style>
